<template>
  <div>
    <a-drawer
      width="700"
      :maskClosable="false"
      :visible="userData.show"
      direction="rtl"
      @close="handleClose"
    >
      <div slot="title">
        <!-- <i class="el-icon-arrow-left"></i> -->
        <span>个人信息</span>
      </div>
      
      <el-row style="width:700px;padding-bottom:150px;height:100%;overflow-y:auto">
        <el-col :span="20">
          <el-form
            :model="parames"
            :rules="rules"
            label-position="left"
            ref="parames"
            label-width="94px"
            class="addForm"
            size="small"
          >
            <el-row :gutter="40" style="padding: 0 40px;margin-top:30px">
              <el-col :span="24">
                  <el-form-item label="姓名:" prop="name">
                    <el-input  v-model="parames.name"></el-input>
                  </el-form-item>
              </el-col>
              <el-col :span="24">
                  <el-form-item label="性别:" prop="gender">
                    <el-radio v-model="parames.gender" :label="true">男</el-radio>
                    <el-radio v-model="parames.gender" :label="false">女</el-radio>
                  </el-form-item>
              </el-col>
              <el-col :span="24">
                  <el-form-item label="手机号码:" prop="mobile">
                    <el-input  v-model="parames.mobile"></el-input>
                  </el-form-item>
              </el-col>
              <el-col :span="24">
                  <el-form-item label="邮箱:" prop="email">
                    <el-input  v-model="parames.email"></el-input>
                  </el-form-item>
              </el-col>
              
              
              
              <el-col :span="24">
                  <el-form-item label="身份:">
                    {{parames.employeeTypeName}}
                  </el-form-item>
              </el-col>
              <el-col :span="24">
                  <el-form-item label="登录账号:" prop="username">
                    {{parames.username}}
                  </el-form-item>
              </el-col>
              <el-col :span="24">
                  <el-form-item label="部门:" prop="departmentId">
                    {{parames.departmentName}}
                  </el-form-item>
              </el-col>
              <!-- <el-col :span="24">
                  <el-form-item label="密码:" prop="password">
                    <el-input  v-model="parames.password"></el-input>
                  </el-form-item>
              </el-col> -->
              
              
            </el-row>
          </el-form>
        </el-col>
      </el-row>

      <div class="from-bottom-box">
        <el-button size="small" type="primary" @click="handleSend('2')">保存</el-button>
        <el-button size="small" type="primary" @click="handleEditPassword">修改密码</el-button>
        <el-button size="small" @click="handleClose">取消</el-button>
      </div>
      <editPassWordDialog :passwordData="passwordData"></editPassWordDialog>

    </a-drawer>
  </div>
</template>

<script>
import editPassWordDialog from '../systemManage/editPassword'

export default {
  props: ["userData"],
  data() {
    return {
      parames: {
        id: '', //用户id
        name: '', //姓名
        gender: true, //性别（布尔值）
        mobile: '', //手机号码,
        email: '', //邮箱地址,
        username: '', //用户名,
        password: '', //密码,
        employeeTypeName: '',
        employeeType: '', //身份
        departmentId: '' , //部门ID
        departmentName: '',
        roleList: [], //角色
      },
      passwordData: {
        userId: '',
        show: false
      },
      rules: {
        name: [{ required: true, message: "必填", trigger: ["blur","change"] }],
        mobile: [{ required: true, message: "必填", trigger: ["blur","change"] }],
        email: [{ required: true, message: "必填", trigger: ["blur","change"] }],
        gender: [{ required: true, message: "必填", trigger: ["blur","change"] }],
      },
    };
  },
  components: {
    editPassWordDialog
  },
  mounted() {},
  methods: {
    addUser () { //添加新成员
      this.searchData.show = true
    },
    handleClose() {
      //关闭弹窗
      this.userData.show = false;
    },
    handleEditPassword () { //修改密码弹窗
      this.passwordData.userId = this.parames.id
      this.passwordData.show = true
    },
    handleSend (type) { //提交信息
      this.$refs['parames'].validate((valid) => {
        if (valid) {
            this.$post(this.$api.postProviderPersonelEdit,{
              id: this.parames.id,
              name: this.parames.name,
              gender: this.parames.gender,
              mobile: this.parames.mobile,
              email: this.parames.email
            }).then(response => {
              if (response.data.succeed) {
                  this.$message({message: '修改成功',type: 'success'})
                  this.handleClose()
              }
            })
        }
      })
    },
    handleEdit () {
      this.editData.show = true
    },
    render () {
      let userInfo = this.$utils.getLocalStorage('user')
      this.$post(this.$api.postProviderPersonelFind,{
          userId: userInfo.id
        }).then(response => {
          if (response.data.succeed) {
            let data = response.data.data
            this.parames.id = data.id
            this.parames.name = data.name //姓名
            this.parames.gender = data.gender //性别（布尔值）
            this.parames.mobile = data.mobile //手机号码
            this.parames.email = data.email //邮箱地址
            this.parames.username = data.username //用户名
            this.parames.departmentId = data.departmentId
            this.parames.departmentName = data.departmentName
            if (data.employeeType) {
              this.parames.employeeTypeName = data.employeeType.desc //身份
            }
          }
        })
    }
  },
  computed: { //计算属性
    changeDialog () {
      return this.userData.show
    }
  },
  watch: {
    changeDialog: {
      handler (curVal, oldVal) {
        if (curVal) {
          this.render()
        } else {
        }
      }
    },
    deep: true
  }
};
</script>

<style scoped>
</style>
